/* 
* Copyright (c) 2021-2023 Alibaba Cloud Computing Ltd. 
* SPDX-License-Identifier: MulanPSL-2.0 
*/ 
import React, {useState, useEffect, useRef, } from 'react';
import { Breadcrumb, Spin } from 'antd';
import { FormattedMessage, useIntl, history, request, Link } from '@umijs/max';
import styled from 'styled-components'
import { myIsNaN, timeFile, getPageQuery, dataDealWith } from '@/uitls/uitls'
import{ RelativeScore, RealScore } from './components/CarouselItem'
import SensitivityTable from './components/SensitivityTable'
import styles from './index.less';

const LinkSpan = styled.span`cursor:pointer;`
export default (): React.ReactNode => {
  const query = getPageQuery() || {};
  const { name = []  } = query
  //
  const [loading, setLoading] = useState(false)
  const [tableData, setTableData] = useState([])
  const [current, setCurrent] = useState(0);
  const carouselRef = useRef<any>(null);

  // 初始化请求数据
  const requestAllData = async (q?: any)=> {
    setLoading(true);
    try {
      const data = await request('/var/keentune/tuning_jobs.csv', { skipErrorHandler: true, params: { q: Math.random()*(1000+1)} })
      const resetData = dataDealWith(data)
      if (resetData && resetData.length) {
        // setDataSource(resetData);
        // 过滤出选中的数据
        const rowSelected: any = resetData.filter((item: any)=> name.includes(item.name) )
        setTableData(rowSelected)
      }
      setLoading(false);
    } catch (err) {
      setLoading(false);
    }
  }

  useEffect(() => {  
    requestAllData() 
  }, [])

  useEffect(() => {
    carouselRef?.current?.goTo(current);
    return () => { setCurrent(0) }
  }, [])

  return (
    <div>
      {/* <Breadcrumb style={{ margin: '20px 0' }}>
        <Breadcrumb.Item >
          <LinkSpan onClick={() => history.push('/list/tuning-task') }>
            <FormattedMessage id="tuning-task.details.list"/>
          </LinkSpan>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <FormattedMessage id="tuning-task.task.compare"/>
        </Breadcrumb.Item>
      </Breadcrumb> */}

      <Breadcrumb style={{ margin: '20px 0' }}
        items={[
          {
            title: <Link to="/list/tuning-task"><FormattedMessage id="tuning-task.details.list"/></Link>,
          },
          {
            title: <FormattedMessage id="tuning-task.task.compare"/>,
          },
        ]}
      />

      <div className={styles.swiper_container}>
        <RelativeScore data={tableData} />
      </div>

      <Spin spinning={loading}>
        <SensitivityTable data={tableData} />
      </Spin>
    </div>
  );
};
